<!--
 * @Author: angelWife zzwchilong@163.com
 * @Date: 2024-03-31 23:58:49
 * @LastEditors: zhouzhiwei zzwchilong@163.com
 * @LastEditTime: 2025-05-20 22:07:43
 * @FilePath: \steel-cloud-static\static\company\html\demo\detail.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="../../plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="../../plugin/swiper/swiper.min.css" />

    <link rel="stylesheet" href="../../css/animate.css" />
    <link rel="stylesheet" href="../../css/fonts/iconfont.css" />
    <link rel="stylesheet" href="../../plugin/summernote/summernote.css" />
    <link rel="stylesheet" href="../../plugin/zTree/css/zTreeStyle.css" />
    <link rel="stylesheet" href="../../plugin/webuploader/webuploader.css" />

    <script type="text/javascript" src="../../js/jquery.js"></script>
    <script type="text/javascript" src="../../js/province.js"></script>
    <script type="text/javascript" src="../../js/Sortable.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-sortable.js"></script>
    <script type="text/javascript" src="../../plugin/layui/layui.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script type="text/javascript" src="../../js/echarts.min.js"></script>
    <script type="text/javascript" src="../../js/menu.js"></script>
    <script
      type="text/javascript"
      src="../../plugin/webuploader/webuploader.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/swiper/swiper.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/summernote/summernote.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/zTree/js/jquery.ztree.all.min.js"
    ></script>
    <link rel="stylesheet" href="../../css/common.css" />
    <link rel="stylesheet" href="../../css/style.css" />
  </head>
  <body class="child_body">
    <div class="common_modal">
      <div class="common_title">
        <div class="title_text">销售信息</div>
      </div>
      <div class="myFormModal clearfix">
        <div class="myFormItem flex">
          <label><span class="red">*</span>客户名称</label>
          <div class="formBox">
            <input class="form-control" />
          </div>
        </div>
        <div class="myFormItem flex">
          <label>日期</label>
          <div class="formBox">
            <input
              class="form-control"
              id="datetimepicker"
              placeholder="请选择时间"
            />
          </div>
        </div>
        <div class="myFormItem flex">
          <label>日期区间</label>
          <div class="formBox dateRange flex" id="dateRangePicker">
            <input
              class="flex-1 form-control"
              id="startTime"
              placeholder="起始时间"
            />
            <span class="p-l-r-5">至</span>
            <input
              class="flex-1 form-control"
              id="endTime"
              placeholder="结束时间"
            />
          </div>
        </div>
        <div class="myFormItem flex">
          <label>树下拉框</label>
          <div class="formBox comTreeSelect" id="treeSelectDemo">
            <div class="inputBox">
              <input class="form-control" placeholder="请选择" />
              <span class="iconfont icon-arrow-down"></span>
            </div>
            <div class="comTreeBox">
              <div class="ztree" id="treeTestBox"></div>
              <div class="treeFootBtn">
                <button class="btn btn-default btn-sm" onclick="cancelTree()">
                  取消
                </button>
                <button class="btn btn-info btn-sm" onclick="sureTree()">
                  确认
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="myFormItem flex">
          <label>省市区</label>
          <div class="formBox formProvince">
            <span
              class="clearValue iconfont icon-close-X"
              onclick="clearInputVal(this)"
            ></span>
            <input
              type="text"
              id="myProvince"
              class="form-control"
              readonly
              placeholder="请选择"
            />
          </div>
        </div>
        <div class="myFormItem flex">
          <label>下拉选择</label>
          <div class="formBox">
            <div id="muitSelectDemoTest" class="comSelectBox"></div>
          </div>
        </div>
        <div class="myFormItem flex">
          <label>是否直接出库</label>
          <div class="formBox">
            <div class="comRadioBox">
              <label class="radio-inline">
                <input
                  type="radio"
                  name="inlineRadioOptions"
                  id="inlineRadio1"
                  value="option1"
                />
                不启用
                <span
                  class="iconfont icon-wenhao f_right m-l-5"
                  id="questionDemo"
                ></span>
              </label>
              <label class="radio-inline">
                <input
                  type="radio"
                  name="inlineRadioOptions"
                  id="inlineRadio2"
                  value="option2"
                />
                启用
              </label>
            </div>
          </div>
        </div>
        <div class="myFormItem flex">
          <label>是否直接出库</label>
          <div class="formBox">
            <div class="comCheckBox">
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1" />
                星期一
              </label>
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2" />
                星期二
              </label>
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3" />
                星期三
              </label>
            </div>
          </div>
        </div>
        <div class="myFormItem flex block">
          <label>备注</label>
          <div class="formBox">
            <textarea class="form-control"></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class="common_modal m-t-15">
      <div class="common_title">
        <div class="title_text">销售明细</div>
      </div>
      <div class="comTabList lineTab clearfix">
        <div class="item active">全部</div>
        <div class="item">待审核</div>
        <div class="item">已审核</div>
        <div class="item">已完成</div>
      </div>
      <div class="totalSum m-t-15 m-b-0">
        <span class="text">统计</span><span class="text">订单(0条)</span
        ><span class="text">采购重量(0.000吨)</span
        ><span class="text">入库重量(0.000吨)</span
        ><span class="text">结算重量(0.000吨)</span
        ><span class="text">金额(0.00元)</span>
      </div>
      <div class="tableOperBox flex p-t-b-10">
        <div class="flex-1">
          <div class="inline text">
            <input type="checkbox" disabled />已选中<span class="red">0</span>条
          </div>
          <button
            type="button"
            onclick="addData()"
            class="m-l-10 btn btn-default-self btn-sm"
          >
            添加库存
          </button>
          <button
            type="button"
            onclick="getTableData()"
            class="m-l-10 btn btn-default-self btn-sm"
          >
            获取table数据
          </button>
        </div>
        <div>
          <div class="btn-group self-btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default-self btn-sm active">
              单据视图
            </button>
            <button type="button" class="btn btn-default-self btn-sm">
              明细视图
            </button>
          </div>
          <div
            class="inline text m-l-10 curPointer"
            onclick="setColumnDialog()"
          >
            <span class="iconfont icon-settings"></span>列表设置
          </div>
        </div>
      </div>
      <table
        class="layui-hide"
        id="editTableDemo"
        lay-filter="editTableDemo"
      ></table>
    </div>
    <div class="common_modal m-t-15">
      <div class="common_title">
        <div class="title_text">关联文件</div>
      </div>
      <div class="tableOperBox flex p-b-10">
        <div class="flex-1">
          <div class="inline text">
            <input type="checkbox" />已选中<span class="red">0</span>条
          </div>
          <button
            type="button"
            onclick="addFile()"
            class="m-l-10 btn btn-default-self btn-sm"
          >
            添加
          </button>
          <button
            type="button"
            onclick="delFile()"
            class="m-l-10 btn btn-default-self btn-sm"
          >
            删除
          </button>
          <button
            type="button"
            onclick="downloadFile()"
            class="m-l-10 btn btn-default-self btn-sm"
          >
            下载
          </button>
        </div>
      </div>
      <table class="layui-hide" id="fileTable" lay-filter="fileTable"></table>
    </div>
    <div id="fileOperateDialog" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document" style="width: 600px">
        <div class="modal-content" style="width: 600px">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title algin-center">请选择</h4>
          </div>
          <div class="modal-body p-15">
            <div
              class="fileItem flex items-center pointer"
              onclick="openFileListDialog()"
            >
              <div class="fw600">从文件管理中选择</div>
            </div>
            <div
              class="fileItem flex flex-col justify-center pointer"
              id="fileUploadBox1"
            >
              <div class="fw600">上传盖章文件</div>
              <div class="fs12 m-t-5">
                建议上传合同等需盖章文件，支持PDF及图片格式
              </div>
            </div>
            <div
              class="fileItem flex flex-col justify-center pointer"
              id="fileUploadBox2"
            >
              <div class="fw600">上传无需盖章文件</div>
              <div class="fs12 m-t-5">
                支持常用文件格式，但仅PDF及图片格式支持预览
              </div>
            </div>
          </div>
          <div class="modal-footer border0">
            <button
              type="button"
              class="cancel btn btn-default btn-wight"
              data-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="confirm btn btn-info">确认</button>
          </div>
        </div>
      </div>
    </div>
    <div id="fileListDialog" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document" style="width: 1100px">
        <div class="modal-content" style="width: 1100px">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">选择文件</h4>
          </div>
          <div class="modal-body p-15">
            <div class="myFormModal clearfix">
              <div class="myFormItem flex">
                <label>日期</label>
                <div class="formBox flex items-center" id="rangeBox">
                  <div class="dateInput">
                    <input
                      class="form-control"
                      id="timeRangeStart"
                      placeholder="结束时间"
                      style="width: 200px"
                    />
                    <span class="iconfont icon-timer1"></span>
                  </div>
                  <div>-</div>
                  <div class="dateInput">
                    <input
                      class="form-control"
                      id="timeRangeEnd"
                      placeholder="结束时间"
                      style="width: 200px"
                    />
                    <span class="iconfont icon-timer1"></span>
                  </div>
                  <button
                    class="btn-default-self m-l-10"
                    onclick="setRangeDay(7)"
                  >
                    近7天
                  </button>
                  <button
                    class="btn-default-self m-l-10"
                    onclick="setRangeDay(14)"
                  >
                    近14天
                  </button>
                  <button
                    class="btn-default-self m-l-10"
                    onclick="setRangeDay(30)"
                  >
                    近30天
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer border0">
            <button
              type="button"
              class="cancel btn btn-default btn-wight"
              data-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="confirm btn btn-info">确认</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/html" id="TPL-laydate-demo">
    <input
      class="layui-input laydate-demo"
      placeholder="选择日期"
      value="{{= d.date || '' }}"
    />
  </script>
  <script>
    $(function () {
      bindComEvent();
      //提示信息
      var tipInd, mylayer;
      $("#questionDemo").hover(
        function () {
          var that = this;
          layui.use("layer", function () {
            mylayer = layer;
            tipInd = layer.tips("只想提示地精准些", that, {
              tips: [1],
            });
          });
        },
        function () {
          mylayer.close(tipInd);
        }
      );
      //日期
      var datePicker1 = $("#datetimepicker").initDatePicker({ type: "date" });
      var datePicker2 = $("#dateRangePicker").initDatePicker({
        type: "datetime",
        range: ["#startTime", "#endTime"],
      });
      //省市区
      $("#myProvince").initProvince({
        id: "myProvince",
        type: "static", //这边是根据类型用不同的组件
        codes: [], //这个在编辑的时候给的默认值
        data: [], //传入进去的数据
        // getData: getProvinceData, //根据要求加载子选项
        autoWidth: true,
      });
      //下拉选择
      $("#muitSelectDemoTest").comSelect({
        mutiselect: true,
        data: [
          { name: "ceshi1", id: 111 },
          { name: "ceshi2", id: 222 },
        ],
      });
      //input树结构
      var zNodes = [
        { id: 1, pId: 0, name: "父节点1" },
        { id: 11, pId: 1, name: "子节点1" },
        { id: 12, pId: 1, name: "子节点2" },
        { id: 2, pId: 0, name: "父节点2" },
        { id: 3, pId: 0, name: "父节点3" },
        { id: 31, pId: 3, name: "3子节点1" },
        { id: 32, pId: 3, name: "3子节点2" },
      ];
      var zTreeSettings = {
        check: {
          chkboxType: { Y: "ps", N: "ps" },
          chkStyle: "checkbox",
          enable: true,
        },
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0,
          },
        },
      };
      var myTree = $.fn.zTree.init($("#treeTestBox"), zTreeSettings, zNodes);
      window.myTree = myTree;
      $("#treeSelectDemo .inputBox")
        .off("click")
        .on("click", function () {
          $(this).parent().addClass("active");
          $(this).siblings(".comTreeBox").fadeIn();
          if (window.selectNodes) {
            for (var i = 0, l = window.selectNodes.length; i < l; i++) {
              window.myTree.checkNode(window.selectNodes[i], true, true);
            }
          }
          $(document)
            .off("click")
            .on("click", function (e) {
              if (!$(e.target).parents().is(".comTreeSelect")) {
                cancelTree();
              }
            });
        });
      layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var form = layui.form;
        var laydate = layui.laydate;
        $.extend({
          laytable: table,
          laydropdown: dropdown,
          layform: form,
          laydate: laydate,
        });
        initEditTable();
        initFileTable();
      });

      //销毁
    });
    function setRangeDay(days) {
      var range = [getDate(null, null, days), getDate()];
      $("#timeRangeStart").val(range[0]);
      $("#timeRangeEnd").val(range[1]);
    }
    function openFileListDialog() {
      $("#fileListDialog").on("shown.bs.modal", function () {
        $("#rangeBox").initDatePicker({
          type: "date",
          range: ["#timeRangeStart", "#timeRangeEnd"],
        });
        // $("#endTimer").initDatePicker({ type: "date" });
      });
      $("#fileListDialog").modal("show");
    }
    function addFile() {
      $("#fileOperateDialog").on("shown.bs.modal", function () {
        $.initUploader({
          picker: "#fileUploadBox1",
          fileSize: 10, //文件大小M
          noDom: true, //直接返回file
          //fileTypes:'jpeg,png'   //String Or Array,
          //fileData:[{type:'png',name:'文件名',src:'文件网络路径',id:111}],//初始化静态数据，对象数组
          delCallback: function () {
            alert("删除回调");
            return true;
          }, //删除回调
          beforeUpload: function (res) {
            //选择文件后回调
            alert("文件名称：" + res.name);
            return true;
          },
        });
        $.initUploader({
          picker: "#fileUploadBox2",
          fileSize: 10, //文件大小M
          noDom: true, //直接返回file
          //fileTypes:'jpeg,png'   //String Or Array,
          //fileData:[{type:'png',name:'文件名',src:'文件网络路径',id:111}],//初始化静态数据，对象数组
          delCallback: function () {
            alert("删除回调");
            return true;
          }, //删除回调
          beforeUpload: function (res) {
            //选择文件后回调
            alert("文件名称：" + res.name);
            return true;
          },
        });
      });
      //fileUploadBox1
      $("#fileOperateDialog").modal("show");
    }
    function initFileTable() {
      $.laytable.render({
        elem: "#fileTable",
        id: "fileTable",
        page: false,
        data: [{ fileNumber: "asdsadsa" }],
        cols: [
          [
            { type: "checkbox", fixed: "left" },
            {
              field: "fileNumber",
              title: "文件编号",
              align: "center",
              fixed: "left",
            },
            {
              field: "fileName",
              title: "文件名称",
              align: "center",
            },
            {
              field: "fileType",
              title: "文件格式",
              align: "center",
              width: 100,
            },
            {
              field: "fileTypeFlag",
              title: "是否归档",
              align: "center",
              width: 100,
            },
            {
              field: "userName",
              title: "上传人",
              align: "center",
            },
            {
              field: "updateTime",
              title: "上传时间",
              align: "center",
            },
            {
              field: "fileSize",
              title: "文件大小",
              align: "center",
              width: 100,
            },
            {
              field: "operate",
              align: "center",
              title: "操作",
              templet: function (d) {
                var html =
                  '<a data-index="' +
                  d.LAY_INDEX +
                  '" class="pointer m-r-15" style="line-height:30px;">删除</a><a data-index="' +
                  d.LAY_INDEX +
                  '" class="pointer" style="line-height:30px;">下载</a>';
                return html;
              },
            },
          ],
        ],
        done: function (res, curr, count) {},
      });
    }
    function cellTemplate(item, type, fileName) {
      var html = "";
      if (type == "input") {
        html =
          '<input data-index="' +
          item.LAY_NUM +
          '" class="form-control textInput" value="' +
          item[fileName] +
          '"/>';
      } else if (type == "select") {
        html =
          ' <input placeholder="请选择" class="form-control demo-dropdown-base" value="' +
          item[fileName] +
          '">';
      } else if (type == "radio") {
        html =
          '<div class="tableRadioBox" data-index="' +
          item.LAY_NUM +
          '">' +
          '<input type="radio" name="inlineRadioOptions' +
          item.LAY_NUM +
          '" title="男" value="1"' +
          (item[fileName] * 1 == 1 ? "checked" : "") +
          "/>" +
          '<input type="radio" name="inlineRadioOptions' +
          item.LAY_NUM +
          '" title="女" value="2" ' +
          (item[fileName] * 1 != 1 ? "checked" : "") +
          "/>" +
          "</div>";
      } else if (type == "date") {
        html =
          '<input class="form-control tableDate" placeholder="选择日期" value="' +
          item[fileName] +
          '">';
      } else if (type == "operate") {
        html =
          '<a data-index="' +
          item.LAY_NUM +
          '" class="iconfont icon-delete pointer" style="line-height:30px;"></a>';
      }
      return html;
    }
    function initEditTable() {
      $.laytable.render({
        elem: "#editTableDemo",
        id: "editTableDemo",
        page: true,
        data: [
          {
            id: 1001,
            cityName: "南京",
            cityId: 100,
            sex: 2,
            date: "2024-04-20",
            remark: "",
          },
        ],
        css: [
          // 设置单元格样式
          // 取消默认的溢出隐藏，并设置适当高度
          ".layui-table-cell{}",
          ".layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}",
          ".layui-table-cell select{height: 36px; padding: 0 5px;}",
        ].join(""),
        cols: [
          [
            // 表头
            {
              field: "id",
              title: "ID",
              width: 80,
              align: "center",
              fixed: "left",
            },
            {
              field: "cityName",
              title: "select",
              width: 300,
              unresize: true,
              templet: function (d) {
                return cellTemplate(d, "select", "cityName");
              },
            },
            {
              field: "sex",
              title: "状态",
              width: 300,
              unresize: true,
              align: "left",
              templet: function (d) {
                return cellTemplate(d, "radio", "sex");
              },
            },
            {
              field: "date",
              title: "laydate",
              width: 300,
              templet: function (d) {
                return cellTemplate(d, "date", "date");
              },
            },
            {
              field: "remark",
              title: "文本",
              templet: function (d) {
                return cellTemplate(d, "input", "remark");
              },
            },
            {
              field: "operate",
              width: 50,
              title: "操作",
              templet: function (d) {
                return cellTemplate(d, "operate", "");
              },
            },
          ],
        ],
        done: function (res, curr, count) {
          var options = this;
          // 获取当前行数据
          $.laytable.getRowData = function (tableId, elem) {
            var index = $(elem).closest("tr").data("index");
            return $.laytable.cache[tableId][index] || {};
          };
          var tableViewElem = this.elem.next();
          window.tableViewElem = tableViewElem;
          bindTableEvent();

          tableViewElem
            .off("click", ".icon-delete")
            .on("click", ".icon-delete", function () {
              console.log($(this).data("index"));
              var self = $(this);
              var data = $.laytable.cache["editTableDemo"];
              if (data.length == 1) {
                return $.myAlert({
                  message: "最后一条数据",
                });
              } else {
                $.myConfirm({
                  message: "真的删除行么",
                  confirmCallback: function () {
                    self.parents("tr").remove();
                    $.laytable.reload("editTableDemo");
                  },
                });
              }
            });
        },
      });
    }
    function bindTableEvent() {
      $.laydropdown.render({
        elem: ".demo-dropdown-base", // 绑定元素选择器，此处指向 class 可同时绑定多个元素
        data: [
          {
            title: "南京",
            id: 100,
          },
          {
            title: "上海",
            id: 101,
          },
          {
            title: "广州",
            id: 102,
          },
        ],
        style: "width:120px;",
        click: function (obj) {
          var data = $.laytable.getRowData("editTableDemo", this.elem);
          this.elem.val(obj.title);
          data.cityId = obj.id;
          data.cityName = obj.title;
        },
      });
      $.laydate.render({
        elem: ".tableDate",
        theme: "#1890ff",
        done: function (value, date, endDate) {
          var data = $.laytable.getRowData("editTableDemo", this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
          data.date = value;
        },
      });
      window.tableViewElem
        .off("click", ".layui-form-radio")
        .on("click", ".layui-form-radio", function (e) {
          var val = $(this).prev("input").val();
          var index = $(this).parent(".tableRadioBox").data("index");
          var data = $.laytable.getRowData("editTableDemo", $(this));
          data.sex = val * 1;
        });
      window.tableViewElem.find(".textInput").on("input", function () {
        console.log($(this).val());
        var val = $(this).val();
        var index = $(this).data("index");
        var data = $.laytable.getRowData("editTableDemo", $(this));
        data.remark = val;
      });
    }
    function addData() {
      var data = $.laytable.cache["editTableDemo"];
      data.push({
        id: 1002,
        cityName: "",
        cityId: "",
        sex: 1,
        date: "",
        remark: "",
      });
      console.log($.laytable);
      $.laytable.reloadData("editTableDemo", { data: data }, function () {});
    }
    function getTableData() {
      var data = $.laytable.cache["editTableDemo"];
      alert(JSON.stringify(data));
    }
  </script>
</html>
